<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宿舍管理系统</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath }/statics/images/logo.jpg"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/layui.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/sccl.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery-1.12.4.js" ></script>
<style type="text/css">
 .drag{
   width: 270px;
   height: 40px;
   line-height: 40px;
   background-color: #e8e8e8;
   position: relative;
   margin:0 auto;
  }
  .bg{
   width:40px;
   height: 100%;
   position: absolute;
   background-color: #75CDF9;
  }
  .text{
   position: absolute;
   width: 100%;
   height: 100%;
   text-align: center;
   user-select: none;
  }
  .btn{
   width:40px;
   height: 38px;
   position: absolute;
   border:1px solid #ccc;
   cursor: move;
   font-family: "宋体";
   text-align: center;
   background-color: #fff;
   user-select: none;
   color:#666;
  }
</style>


</head>
<body class="login-bg">
    <div class="login-box">
        <header>
            <h1>宿舍管理系统</h1>
        </header>
        <!-- 邮箱登录开始 -->
        	<script type="text/javascript">
        		$(function () {
        			
        			$("#phone").blur(function() {
        				var phone=$("#phone").val();
        				$.get("${pageContext.request.contextPath}/users/ishaveemail",{"email":phone},
        						function (data) {
		        					if(data==null){
										$(".clear").html("经检测此手机号还未注册");
									}else{
										$("#huoquyanzhengma").click(function() {
											var phone=$("#phone").val();
											$.get("${pageContext.request.contextPath}/users/phoneLogin",{"phone":phone},
													function (data) {
														if(data!=null){
															$(".clear").html("验证码已经发送，请注意查收！");
															$("#data").val(data);
														}
													})
										})
									}
								})
					})
        			
					
					
				})
        	</script>
        	<script type="text/javascript">
        		$(function () {
        			$("#emaillogin").click(function() {
    					var a=$("#yanzhengma").val();
    					var data=$("#data").val();
    					var email=$("#phone").val();
    					if(a==null||a==""){
    						$(".clear").html("请输入验证码！");
    					}else if(a!=data){
    						$(".clear").html("验证码不正确！");
    					}else{
    						location.href="${pageContext.request.contextPath}/users/emaillogin?email="+email;
    					}
    				})
				})
        		
        	</script>
        	<div class="login-main" id="emailandpassword">
			<form action="#" class="layui-form" method="post">
				<input name="__RequestVerificationToken" type="hidden" value="">                
				<div class="layui-form-item">
					<label class="login-icon">
						<i class="layui-icon"><img src="${pageContext.request.contextPath}/statics/images/username.png" style="width: 20px;" height="20px;" alt="" /></i>
					</label>
					<input type="text" name="phone" id="phone" lay-verify="phone" autocomplete="off" placeholder="请输入有效手机号" class="layui-input" value="">
					<a href="${pageContext.request.contextPath}/users/tologin">账号密码登录</a><span>||</span><a href="${pageContext.request.contextPath}/users/ToPhoneLogin">手机号登录</a>
				</div>
				<div class="layui-form-item" style="width: 139px;">
					<label class="login-icon">
						<i class="layui-icon"><img src="${pageContext.request.contextPath}/statics/images/password.png" style="width: 20px;" height="20px;" alt="" /></i>
					</label>
					<input type="text" id="yanzhengma" name="yanzhengma" lay-verify="password" autocomplete="off" placeholder="请输入验证码" class="layui-input" >
					<input type="hidden" id="data" value="" />
				</div>
				<div class="pull-right" style="position:absolute; top:360px;right: 822px;">
					<input type="button" id="huoquyanzhengma" value="获取验证码 " class="layui-btn layui-btn-primary"/>
				</div>
				<br />
				<div class="layui-form-item">
					<div class="pull-left login-remember">
						<label><!-- <a href="">忘记密码？</a> --></label>
					</div>
					<div class="pull-right">
					<input type="button" id="emaillogin" value="登录 &nbsp;&nbsp;" class="layui-btn layui-btn-primary"/>
					</div><br />
					<div class="clear" style="color: red;">${message}</div>
				</div>
			</form>        
		</div>
        <!-- 邮箱登录结束-->
        
        
        
    </div>
   
  </body>
</html>